import { View, Swiper, SwiperItem, Image } from '@tarojs/components'
import { AtActivityIndicator } from 'taro-ui'
import onNavigation from '@/utils/command/onNavigation'
import './index.scss'

// 轮播图与视频视图
export default ({ goods = { contentList: {} } }) => {
  const { contentList = { content: [] } } = goods
  const loading = contentList['content'] && contentList['content'].length > 0

  const style = {
    marginBottom: goods['margin'] ? `${goods['margin']}px` : 0
  }
  return (
    <View className='swiper-wrap' style={{ ...style }}>
      {
        loading ? (
          <Swiper
            className='goods-details-swiper'
            indicatorColor='#C7C7C7'
            indicatorActiveColor='#FFFFFF'
            circular
            indicatorDots
            autoplay
          >
            {
              contentList['content'].map(val => {
                return (
                  <SwiperItem key={val.contentImg}>
                    <Image
                      mode='widthFix'
                      lazyLoad
                      onClick={() => {
                        onNavigation(val)
                      }}
                      className='swiper-img'
                      src={val.contentImg}
                    />
                  </SwiperItem>
                )
              })
            }
          </Swiper>
        ) :
          <AtActivityIndicator mode='center' />
      }
    </View>
  )
}
